@import "./colors.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .ui-copy {
    @apply text-gray-900;
  }

  .ui-copy-muted {
    @apply text-gray-800 dark:text-gray-800;
  }

  .ui-copy-strong {
    @apply text-gray-900 font-semibold;
  }

  .ui-copy-icon {
    @apply ui-copy-muted;
  }

  .ui-copy-number {
    font-feature-settings:
      "case" 0,
      "cpsp" 0,
      "dlig" 0,
      "frac" 0,
      "dnom" 0,
      "numr" 0,
      "salt" 0,
      "subs" 0,
      "sups" 0,
      "tnum",
      "zero" 0,
      "ss01",
      "ss02" 0,
      "ss03" 0,
      "ss04" 0,
      "cv01" 0,
      "cv02" 0,
      "cv03" 0,
      "cv04" 0,
      "cv05" 0,
      "cv06" 0,
      "cv07" 0,
      "cv08" 0,
      "cv09" 0,
      "cv10" 0,
      "cv11" 0,
      "calt",
      "ccmp",
      "kern";
  }

  .ui-copy-inactive {
    @apply text-gray-500;
  }

  .ui-copy-disabled {
    @apply ui-copy-inactive;
  }

  /** a non-acccessible faint version of ui-copy-disabled used in dimension tables */
  .ui-copy-disabled-faint {
    @apply text-gray-400;
  }

  .ui-copy-code {
    font-family: var(--monospace);
    font-size: 11px;
    @apply text-gray-600;
  }

  .ui-measure-bar-included {
    @apply bg-theme-100;
  }

  .ui-measure-bar-included-selected {
    @apply bg-theme-200;
  }

  .ui-measure-bar-excluded {
    @apply bg-gray-100;
  }

  .ui-editor-text-error {
    color: var(--ui-editor-error-foreground);
  }

  .ui-editor-bg-error {
    @apply bg-red-50;
  }
}

@layer base {
  :root {
    color-scheme: light;
    color: var(--color-gray-900);

    --ui-editor-error-foreground: hsl(0, 75%, 45%);
    --surface: hsl(0deg 0% 100%);
    /* white */

    /* SHADCN VARIABLES */
    --background: var(--color-gray-50);
    --foreground: var(--color-gray-900);
    --card: var(--surface);
    --card-foreground: var(--color-gray-900);
    --popover: var(--surface);
    --popover-foreground: var(--color-gray-900);
    --primary: var(--color-primary-950);
    --primary-foreground: var(--color-primary-50);
    --secondary: var(--color-secondary-100);
    --secondary-foreground: var(--color-secondary-950);
    --muted: var(--color-gray-100);
    --muted-foreground: var(--color-gray-500);
    --accent: var(--color-gray-100);
    --accent-foreground: var(--color-gray-900);
    --destructive: var(--color-red-600);
    --destructive-foreground: var(--color-gray-50);
    --border: var(--color-gray-200);
    --input: var(--color-gray-200);
    --ring: var(--color-gray-950);
    --radius: 0.5rem;

    --color-theme-50: var(
      --color-theme-light-50,
      var(--color-primary-light-50)
    );
    --color-theme-100: var(
      --color-theme-light-100,
      var(--color-primary-light-100)
    );
    --color-theme-200: var(
      --color-theme-light-200,
      var(--color-primary-light-200)
    );
    --color-theme-300: var(
      --color-theme-light-300,
      var(--color-primary-light-300)
    );
    --color-theme-400: var(
      --color-theme-light-400,
      var(--color-primary-light-400)
    );
    --color-theme-500: var(
      --color-theme-light-500,
      var(--color-primary-light-500)
    );
    --color-theme-600: var(
      --color-theme-light-600,
      var(--color-primary-light-600)
    );
    --color-theme-700: var(
      --color-theme-light-700,
      var(--color-primary-light-700)
    );
    --color-theme-800: var(
      --color-theme-light-800,
      var(--color-primary-light-800)
    );
    --color-theme-900: var(
      --color-theme-light-900,
      var(--color-primary-light-900)
    );
    --color-theme-950: var(
      --color-theme-light-950,
      var(--color-primary-light-950)
    );

    --color-theme-secondary-50: var(
      --color-theme-secondary-light-50,
      var(--color-secondary-light-50)
    );
    --color-theme-secondary-100: var(
      --color-theme-secondary-light-100,
      var(--color-secondary-light-100)
    );
    --color-theme-secondary-200: var(
      --color-theme-secondary-light-200,
      var(--color-secondary-light-200)
    );
    --color-theme-secondary-300: var(
      --color-theme-secondary-light-300,
      var(--color-secondary-light-300)
    );
    --color-theme-secondary-400: var(
      --color-theme-secondary-light-400,
      var(--color-secondary-light-400)
    );
    --color-theme-secondary-500: var(
      --color-theme-secondary-light-500,
      var(--color-secondary-light-500)
    );
    --color-theme-secondary-600: var(
      --color-theme-secondary-light-600,
      var(--color-secondary-light-600)
    );
    --color-theme-secondary-700: var(
      --color-theme-secondary-light-700,
      var(--color-secondary-light-700)
    );
    --color-theme-secondary-800: var(
      --color-theme-secondary-light-800,
      var(--color-secondary-light-800)
    );
    --color-theme-secondary-900: var(
      --color-theme-secondary-light-900,
      var(--color-secondary-light-900)
    );
    --color-theme-secondary-950: var(
      --color-theme-secondary-light-950,
      var(--color-secondary-light-950)
    );

    /* SEQUENTIAL PALETTE - For ordered data that progresses from low to high */
    --color-sequential-1: hsl(211deg 79% 94%);
    --color-sequential-2: hsl(211deg 63% 86%);
    --color-sequential-3: hsl(211deg 75% 77%);
    --color-sequential-4: hsl(210deg 73% 64%);
    --color-sequential-5: hsl(208deg 76% 51%);
    --color-sequential-6: hsl(210deg 100% 43%);
    --color-sequential-7: hsl(212deg 100% 36%);
    --color-sequential-8: hsl(214deg 100% 29%);
    --color-sequential-9: hsl(217deg 100% 22%);

    /* DIVERGING PALETTE - For data that diverges from a critical midpoint */
    --color-diverging-1: hsl(353deg 87% 48%);
    --color-diverging-2: hsl(12deg 100% 62%);
    --color-diverging-3: hsl(27deg 100% 70%);
    --color-diverging-4: hsl(40deg 96% 82%);
    --color-diverging-5: hsl(59deg 48% 94%);
    --color-diverging-6: hsl(194deg 100% 86%);
    --color-diverging-7: hsl(199deg 91% 73%);
    --color-diverging-8: hsl(202deg 83% 57%);
    --color-diverging-9: hsl(207deg 100% 44%);
    --color-diverging-10: hsl(217deg 100% 39%);
    --color-diverging-11: hsl(237deg 69% 34%);

    /* QUALITATIVE PALETTE - For categorical data without inherent ordering */
    /* Based on ColorBrewer Paired + Set3, extended to 24 colors */
    --color-qualitative-1: hsl(156deg 56% 52%);
    --color-qualitative-2: hsl(27deg 100% 65%);
    --color-qualitative-3: hsl(195deg 100% 46%);
    --color-qualitative-4: hsl(289deg 61% 76%);
    --color-qualitative-5: hsl(109deg 56% 64%);
    --color-qualitative-6: hsl(41deg 83% 69%);
    --color-qualitative-7: hsl(349deg 76% 71%);
    --color-qualitative-8: hsl(217deg 49% 61%);
    --color-qualitative-9: hsl(165deg 100% 36%);
    --color-qualitative-10: hsl(16deg 95% 70%);
    --color-qualitative-11: hsl(236deg 65% 74%);
    --color-qualitative-12: hsl(75deg 43% 66%);
    --color-qualitative-13: hsl(330deg 70% 60%);
    --color-qualitative-14: hsl(55deg 85% 58%);
    --color-qualitative-15: hsl(180deg 85% 42%);
    --color-qualitative-16: hsl(270deg 55% 65%);
    --color-qualitative-17: hsl(140deg 60% 50%);
    --color-qualitative-18: hsl(30deg 90% 62%);
    --color-qualitative-19: hsl(355deg 80% 65%);
    --color-qualitative-20: hsl(210deg 60% 55%);
    --color-qualitative-21: hsl(170deg 70% 45%);
    --color-qualitative-22: hsl(45deg 75% 60%);
    --color-qualitative-23: hsl(250deg 60% 68%);
    --color-qualitative-24: hsl(95deg 50% 58%);

    --editor-selection: #b0daffb3;
    --line-highlight: #ededed5b;
  }

  :root.dark {
    color-scheme: dark;
    color: var(--color-gray-900);

    --surface: var(--color-gray-50);

    /* SHADCN VARIABLES */
    --background: var(--color-gray-100);
    /* --foreground: var(--color-gray-900); */
    /* --card: var(--surface); */
    /* --card-foreground: var(--color-gray-900); */
    --popover: var(--color-gray-100);
    /* --popover-foreground: var(--color-gray-900); */
    /* --primary: var(--color-primary-950); */
    /* --primary-foreground: var(--color-primary-50); */
    /* --secondary: var(--color-secondary-100); */
    /* --secondary-foreground: var(--color-secondary-950); */
    --muted: var(--color-gray-200);
    /* --muted-foreground: var(--color-gray-500); */
    --accent: var(--color-gray-300);
    /* --accent-foreground: var(--color-gray-900); */
    /* --destructive: var(--color-red-600); */
    /* --destructive-foreground: var(--color-gray-50); */
    --border: var(--color-gray-200);
    /* --input: var(--color-gray-200); */
    /* --ring: var(--color-gray-950); */

    --color-theme-50: var(--color-theme-dark-50, var(--color-primary-dark-50));
    --color-theme-100: var(
      --color-theme-dark-100,
      var(--color-primary-dark-100)
    );
    --color-theme-200: var(
      --color-theme-dark-200,
      var(--color-primary-dark-200)
    );
    --color-theme-300: var(
      --color-theme-dark-300,
      var(--color-primary-dark-300)
    );
    --color-theme-400: var(
      --color-theme-dark-400,
      var(--color-primary-dark-400)
    );
    --color-theme-500: var(
      --color-theme-dark-500,
      var(--color-primary-dark-500)
    );
    --color-theme-600: var(
      --color-theme-dark-600,
      var(--color-primary-dark-600)
    );
    --color-theme-700: var(
      --color-theme-dark-700,
      var(--color-primary-dark-700)
    );
    --color-theme-800: var(
      --color-theme-dark-800,
      var(--color-primary-dark-800)
    );
    --color-theme-900: var(
      --color-theme-dark-900,
      var(--color-primary-dark-900)
    );
    --color-theme-950: var(
      --color-theme-dark-950,
      var(--color-primary-dark-950)
    );

    --color-theme-secondary-50: var(
      --color-theme-secondary-dark-50,
      var(--color-secondary-dark-50)
    );
    --color-theme-secondary-100: var(
      --color-theme-secondary-dark-100,
      var(--color-secondary-dark-100)
    );
    --color-theme-secondary-200: var(
      --color-theme-secondary-dark-200,
      var(--color-secondary-dark-200)
    );
    --color-theme-secondary-300: var(
      --color-theme-secondary-dark-300,
      var(--color-secondary-dark-300)
    );
    --color-theme-secondary-400: var(
      --color-theme-secondary-dark-400,
      var(--color-secondary-dark-400)
    );
    --color-theme-secondary-500: var(
      --color-theme-secondary-dark-500,
      var(--color-secondary-dark-500)
    );
    --color-theme-secondary-600: var(
      --color-theme-secondary-dark-600,
      var(--color-secondary-dark-600)
    );
    --color-theme-secondary-700: var(
      --color-theme-secondary-dark-700,
      var(--color-secondary-dark-700)
    );
    --color-theme-secondary-800: var(
      --color-theme-secondary-dark-800,
      var(--color-secondary-dark-800)
    );
    --color-theme-secondary-900: var(
      --color-theme-secondary-dark-900,
      var(--color-secondary-dark-900)
    );
    --color-theme-secondary-950: var(
      --color-theme-secondary-dark-950,
      var(--color-secondary-dark-950)
    );

    /* SEQUENTIAL PALETTE - Dark mode (brighter for visibility) */
    --color-sequential-1: hsl(210deg 20% 25%);
    --color-sequential-2: hsl(210deg 25% 30%);
    --color-sequential-3: hsl(210deg 30% 35%);
    --color-sequential-4: hsl(210deg 35% 40%);
    --color-sequential-5: hsl(210deg 40% 45%);
    --color-sequential-6: hsl(210deg 45% 50%);
    --color-sequential-7: hsl(210deg 50% 55%);
    --color-sequential-8: hsl(210deg 55% 60%);
    --color-sequential-9: hsl(210deg 60% 65%);

    /* DIVERGING PALETTE - Dark mode (adjusted for dark backgrounds) */
    --color-diverging-1: hsl(270deg 40% 30%);
    --color-diverging-2: hsl(260deg 45% 35%);
    --color-diverging-3: hsl(250deg 50% 40%);
    --color-diverging-4: hsl(240deg 45% 45%);
    --color-diverging-5: hsl(230deg 40% 50%);
    --color-diverging-6: hsl(220deg 35% 55%);
    --color-diverging-7: hsl(85deg 40% 50%);
    --color-diverging-8: hsl(55deg 45% 45%);
    --color-diverging-9: hsl(35deg 50% 40%);
    --color-diverging-10: hsl(25deg 45% 35%);
    --color-diverging-11: hsl(15deg 40% 30%);

    /* QUALITATIVE PALETTE - Dark mode (saturated for distinction) */
    --color-qualitative-1: hsl(163deg 50% 45%);
    --color-qualitative-2: hsl(50deg 60% 50%);
    --color-qualitative-3: hsl(230deg 55% 45%);
    --color-qualitative-4: hsl(320deg 50% 50%);
    --color-qualitative-5: hsl(140deg 55% 50%);
    --color-qualitative-6: hsl(85deg 50% 55%);
    --color-qualitative-7: hsl(10deg 55% 45%);
    --color-qualitative-8: hsl(260deg 50% 45%);
    --color-qualitative-9: hsl(170deg 55% 45%);
    --color-qualitative-10: hsl(40deg 55% 50%);
    --color-qualitative-11: hsl(280deg 50% 50%);
    --color-qualitative-12: hsl(120deg 45% 55%);
    --color-qualitative-13: hsl(340deg 60% 55%);
    --color-qualitative-14: hsl(65deg 70% 55%);
    --color-qualitative-15: hsl(190deg 70% 50%);
    --color-qualitative-16: hsl(285deg 55% 60%);
    --color-qualitative-17: hsl(150deg 60% 55%);
    --color-qualitative-18: hsl(35deg 75% 58%);
    --color-qualitative-19: hsl(5deg 70% 60%);
    --color-qualitative-20: hsl(220deg 60% 60%);
    --color-qualitative-21: hsl(175deg 65% 50%);
    --color-qualitative-22: hsl(55deg 65% 55%);
    --color-qualitative-23: hsl(265deg 55% 65%);
    --color-qualitative-24: hsl(110deg 55% 60%);

    --editor-selection: #304e75;
    --line-highlight: #26262659;
  }

  h1,
  h2,
  h3,
  h4 {
    @apply font-bold;
  }
}

html {
  @apply ui-copy;
}

a,
button {
  @apply ui-copy;
}

body {
  @apply bg-background;
  font-family: "Inter";
  font-size: 12px;

  --system:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";

  --monospace: "Source Code Variable";
  margin: 0;

  padding: 0;

  --right-drawer-width: 400px;

  --left-sidebar-width: 400px;

  --hue: 217;
  --sat: 20%;
  --lgt: 95%;

  --info-bg: hsl(var(--hue), var(--sat), 80%);
  --info-text: hsl(var(--hue), var(--sat), 20%);

  --error-bg: hsl(1, 60%, 90%);
  --error-text: hsl(1, 60%, 30%);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  @apply text-primary-500 hover:text-primary-600 font-medium;
}

.slide {
  transition-property: padding-left;
  transition-duration: 400ms;
  transition-timing-function: ease-in-out;
}

.left-shift {
  @apply pl-8;
}
